<!-- 必须全局拥有唯一的id -->
<div>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$t('instanceInfo.sqxx')" name="first">
            <div :id="logicPageId">

            </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('instanceInfo.lcspls')" name="second">
            <div :id="historyPageId">

            </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('instanceInfo.lcgj')" name="third">
            <div :id="workRouteId">

            </div>
        </el-tab-pane>
    </el-tabs>

    <div>
        <el-card class="box-card" :hidden="cardHidden">
            <div slot="header" class="clearfix">
                <span v-text="title"></span>
            </div>
            <el-form ref="WfOperationForm" :model="WfOperationForm" :rules="rules" label-position="left" label-width="110px">
                <el-form-item :label="$t('instanceInfo.spjl')" required prop="commentSign">
                    <el-select v-model="WfOperationForm.commentSign" :placeholder="$t('instanceInfo.qxzspjl')">
                        <el-option v-for="item in commentSignOptions" :key="item.key" :label="item.value" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('instanceInfo.spyj')" required prop="commentContent">
                    <el-input type="textarea" v-model="WfOperationForm.commentContent"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <el-row>
                <el-button type="primary" @click="saveFn()" v-show="!saveHidden">{{ $t('instanceInfo.bc') }}</el-button>
                <el-button type="primary" @click="submitFn()" v-show="!submitHidden">{{ $t('instanceInfo.tj') }}</el-button>
                <el-button type="primary" @click="wfSignInFn()" v-show="!wfSignInHidden">{{ $t('instanceInfo.qs') }}</el-button>
                <el-button type="primary" @click="wfSignOffFn()" v-show="!wfSignOffHidden">撤销{{ $t('instanceInfo.qs') }}</el-button>
                <el-button type="primary" @click="wfTaskSignOffFn()" v-show="!wfTaskSignOffHidden">{{ $t('instanceInfo.fhxmc') }}</el-button>
                <el-button type="primary" @click="wfWakeFn()" v-show="!wfWakeHidden">{{ $t('instanceInfo.jh') }}</el-button>
                <el-button type="primary" @click="wfHangFn()" v-show="!wfHangHidden">{{ $t('instanceInfo.gq') }}</el-button>
                <el-button type="primary" @click="wfRestFn()" v-show="!wfHangHidden">{{ $t('instanceInfo.zzjdblr') }}</el-button>
                <el-button type="primary" @click="wfTakeBackFn()" v-show="!wfTakeBackHidden">{{ $t('instanceInfo.nhsh') }}</el-button>
                <el-button type="primary" @click="wfUrgeFn()" v-show="!wfUrgeHidden">{{ $t('instanceInfo.cb') }}</el-button>
                <!--<el-button type="primary" @click="wfDeleteAllFn()" v-show="wfDeleteAllHidden">{{ $t('instanceInfo.fq') }}</el-button>-->
                <el-button type="primary" @click="callSubFlowFn()" v-show="!callSubFlowHidden">{{ callSubFlow }}</el-button>
                <el-button type="primary" @click="closeFn()">{{ $t('instanceInfo.gb') }}</el-button>
            </el-row>
        </el-card>

        <!--打回节点选择页面 -->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" height="370px" width="700px"
            @close="wfCallBackClose">
            <el-form ref="backNodeForm" :model="backNodeForm" label-width="800px" :inline="true">
                <el-tabs v-model="backNodeFormActiveName" type="card">
                    <el-tab-pane :label="$t('instanceInfo.dhjd')" name="first">
                        <el-row style="margin-top: 20px">
                            <el-col :span="4">
                                &nbsp;
                            </el-col>
                            <el-col :span="20">
                                <el-radio-group v-model="backNodeModel" @change="radioChange">
                                    <el-row :gutter="30" v-for="(item,index) in backNodeList" :key="item.nodeId">
                                        <el-col :span="8">
                                            <el-radio :label="item.nodeId" :key="item.nodeName">{{item.nodeName}}</el-radio>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-radio-group v-model="userModel" :disabled="!item.selected">
                                                <el-radio v-for="(item1,index1) in usersList[index]" :label="item1.userId" :key="item1.userName">{{item1.userName}}</el-radio>
                                            </el-radio-group>
                                        </el-col>
                                    </el-row>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('instanceInfo.dhhtjfs')" name="second">
                        <el-row style="margin-top: 20px">
                            <el-col :span="4">
                                &nbsp;
                            </el-col>
                            <el-col :span="20">
                                <el-radio v-model="callBackModel" label="1">{{ $t('instanceInfo.zjtj') }}</el-radio>
                                <el-radio v-model="callBackModel" label="0">{{ $t('instanceInfo.tjgthfqr') }}</el-radio>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <div slot="footer" align="center">
                <el-button type="primary" @click="wfCallBackClose">{{ $t('instanceInfo.gb') }}</el-button>
                <el-button type="primary" @click="wfCallBack()">{{ $t('instanceInfo.qd') }}</el-button>
            </div>
        </el-dialog-x>

        <!--协办选择人页面-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleAssistUser" height="360px" width="550px">
            <el-form-q form="query" :field-data="queryFields" search-table="assistUserList" :buttons="assistUserButtons"></el-form-q>
            <el-table-x ref="assistUserList" :data-url="urls.getAssistUsersUrl" :default-load=false :base-params="assistUserParams" :table-columns="assistUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnAssistUser">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--流程转办页面-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleChangeUser" height="360px" width="550px">
            <el-table-x ref="changeUserList" :checkbox=true :pageable=true :data-url="urls.getChangeUsersUrl" :request-type="nodeUserResquestType"
                :default-load=false :base-params="commonParams" :table-columns="changeUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnChangeUser">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--流程跳转页面-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleJump" height="360px" width="550px"
            @close="jumpUserClose">
            <el-form ref="jumpUserForm" :model="jumpUserForm" label-width="110px" :inline="true">
                <el-row>
                    <el-col :span="4">
                        &nbsp;
                    </el-col>
                    <el-col :span="20">
                        <table>
                            <el-row>
                                <el-radio-group v-model="jumpUserForm.nextNodeId" @change="jumpUserRadioChange">
                                    <el-row v-for="(item,index) in jumpOptions" :key="item.key">
                                        <el-col :span="8">
                                            <el-radio :label="item.key" :key="item.value">{{item.value}}</el-radio>
                                        </el-col>
                                    </el-row>
                                </el-radio-group>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-input v-model="jumpUserForm.nextNodeUser" :placeholder="$t('instanceInfo.yh')" :disabled=true></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <el-button :disabled="!jumpUserForm.flag" @click="jumpUserFn()">{{ $t('instanceInfo.xzry') }}</el-button>
                                </el-col>
                            </el-row>
                        </table>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" align="center">
                <el-button type="primary" @click="wfJumpFn()">{{ $t('instanceInfo.qd') }}</el-button>
                <el-button type="primary" @click="jumpUserClose()">{{ $t('instanceInfo.qx') }}</el-button>
            </div>
        </el-dialog-x>

        <!--跳转办理人选择页面-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleJumpUser" height="360px" width="550px">
            <el-form-q form="jumpUserQuery" :field-data="jumpUserQueryFields" search-table="jumpUserList" :buttons="jumpUserButtons"></el-form-q>
            <el-table-x ref="jumpUserList" :data-url="urls.getJumpUsersUrl" :default-load=false :base-params="jumpUserParams" :table-columns="jumpUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnJumpUser">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--  节点办理人员重置选择页面 -->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleReset" height="360px" width="550px">
            <el-form-q form="jumpUserQuery" :field-data="jumpUserQueryFields" search-table="jumpUserList" :buttons="resetButtons"></el-form-q>
            <el-table-x ref="resetUserList" :data-url="urls.getJumpUsersUrl" :default-load=false :base-params="jumpUserParams" :table-columns="jumpUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnResetUser">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--下一步骤信息页面（单选） -->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisibleRadio" height="370px" width="700px"
            @close="beforeNextClose">
            <el-form ref="nextNodeForm" :model="nextNodeForm" label-width="110px" :inline="true">
                <el-row>
                    <el-col :span="4">
                        &nbsp;
                    </el-col>
                    <el-col :span="20">
                        <table>
                            <tbody>
                                <tr v-for="(item,index) in nextNodeList">
                                    <td>
                                        <el-radio :label="item.nodeId" v-model="radioModel" @change.native="onAgreeRadioNodeSelect">{{item.nodeName}}</el-radio>
                                    </td>
                                    <td>
                                        <el-input v-model="item.userNames" placeholder="" :disabled=true></el-input>
                                    </td>
                                    <td>
                                        <el-button v-if="item.selected=='1' && item.nodeType !='E'" :disabled="item.selected=='0'" @click="openNodeUsersFn(item.nodeId,index)">{{ $t('instanceInfo.xzry') }}</el-button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" align="center">
                <el-button type="primary" @click="dialogFormVisibleRadio = false">{{ $t('instanceInfo.gb') }}</el-button>
                <el-button type="primary" @click="saveCreateFn()">{{ $t('instanceInfo.qd') }}</el-button>
            </div>
        </el-dialog-x>

        <!--下一步骤信息页面（多选） -->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisibleCheck" height="370px" width="700px"
            @close="beforeNextClose">
            <el-form ref="nextNodeFormCheck" :model="nextNodeFormCheck" label-width="110px" :inline="true">
                <el-row>
                    <el-col :span="4">
                        &nbsp;
                    </el-col>
                    <el-col :span="20">
                        <table>
                            <tbody>
                                <tr v-for="(item,index) in nextNodeList">
                                    <td>
                                        <el-checkbox :label="item.nodeId" true-label="1" false-label="0" v-model="item.selected">{{item.nodeName}}</el-checkbox>
                                    </td>
                                    <td>
                                        <el-input v-model="item.userNames" placeholder="" :disabled=true></el-input>
                                    </td>
                                    <td>
                                        <el-button v-if="item.selected=='1' && item.nodeType !='E'" :disabled="item.selected=='0'" @click="openNodeUsersFn(item.nodeId,index)">{{ $t('instanceInfo.xzry') }}</el-button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" align="center">
                <el-button type="primary" @click="dialogFormVisibleCheck = false">{{ $t('instanceInfo.gb') }}</el-button>
                <el-button type="primary" @click="saveCreateFn()">{{ $t('instanceInfo.qd') }}</el-button>
            </div>
        </el-dialog-x>

        <!--下一处理人选取框(单选)-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleNodeUser" height="360px" width="550px">
            <el-table-x ref="nodeUserList" @loaded="nodeUserListloaded" :data-url="urls.nodeUserUrl" :pageable=true :request-type="nodeUserResquestType"
                :default-load=false :base-params="nodeUserParams" :table-columns="nodeUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnNodeUser">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--下一处理人选取框(多选)-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleNodeUserCheck" height="360px" width="550px">
            <el-table-x ref="nodeUserCheckList" :checkbox=true :pageable=true :data-url="urls.nodeUserUrl" :request-type="nodeUserResquestType"
                :default-load=false :base-params="nodeUserParams" :table-columns="nodeUserTableColumns">
            </el-table-x>
            <div slot="footer" align="center">
                <el-button type="primary" @click="returnNodeUserCheck">{{ $t('instanceInfo.xqfh') }}</el-button>
            </div>
        </el-dialog-x>

        <!--委托模式-->
        <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleAgent" height="360px" width="550px">
            <el-radio-group v-model="agent" @change="agentChange">
                <el-row v-for="(item,index) in agentList" :key="item.key">
                    <el-col>
                        <el-radio :label="item.key" :key="item.value">{{item.value}}</el-radio>
                    </el-col>
                </el-row>
            </el-radio-group>
            <div slot="footer" align="center">
                <el-button type="primary" @click="saveAgent()">{{ $t('instanceInfo.qd') }}</el-button>
            </div>
        </el-dialog-x>
    </div>
    <!--退回节点选择-->
    <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleReturn" height="360px" width="550px">
        <el-radio-group v-model="back" @change="returnChange">
            <el-row v-for="(item,index) in returnList" :key="item.key">
                <el-col>
                    <el-radio :label="item.key" :key="item.value">{{item.value}}</el-radio>
                </el-col>
            </el-row>
        </el-radio-group>
        <div slot="footer" align="center">
            <el-button type="primary" @click="saveBack()">{{ $t('instanceInfo.qd') }}</el-button>
        </div>
    </el-dialog-x>
</div>